/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable react/no-did-update-set-state */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Form } from 'antd';
import moment from 'moment/moment';
import StatisticalData from './StatisticalData';
import DetailedData from './DetailedData';

const formItemLayout = {
  labelCol: {
    xs: { span: 0 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
@connect(({ loading, list, user, setting }) => ({
  list,
  ...setting,
  userInfo: user.currentUser.user_info,
  stationing: loading.effects['area/subList'],
  operatoring: loading.effects['list/getBrandsList'],
  orderSum: loading.effects['list/orderSum'],
}))
@Form.create()
export default class OrderList extends Component {
  state = {
    points: false,
    dataPoints: null,
    between: '',
    chartType: '',
    title: '订单分日数据',
    titlePieLeft: '订单数各品牌占比',
    titlePieRight: '实名订单各品牌占比',
    listType: 'orderSum',
    startDate: moment()
      .startOf('day')
      .subtract(7, 'days'),
    endDate: moment()
      .endOf('day')
      .subtract(1, 'days'),
  };

  componentDidMount = () => {
    this.getList();
  };

  componentDidUpdate(prevProps) {
    const { points } = this.state;
    if (prevProps.area_id !== this.props.area_id && points) {
      this.setState(
        {
          points: false,
        },
        () => {
          this.getList();
        },
      );
    }
  }

  onClickTime = data => {
    const {
      dispatch,
      area_id,
      options: { key },
    } = this.props;
    const reqZoneId = key === 'yz' ? area_id : null;
    this.setState({
      points: true,
      dataPoints: data,
      between: '1',
      chartType: '2',
      title: '订单分日数据',
    });
    dispatch({
      type: 'list/orderList',
      payload: {
        cm_id: data.inn_id,
        start: data.start,
        end: data.end,
        area_id: reqZoneId,
      },
    });
    dispatch({
      type: 'list/orderSummary',
      payload: {
        cm_id: data.inn_id,
        start: data.start,
        end: data.end,
        brand: data.brand,
        area_id: reqZoneId,
      },
      then: () => {},
    });
  };

  onClickBrand = data => {
    const {
      dispatch,
      area_id,
      options: { key },
    } = this.props;
    const reqZoneId = key === 'yz' ? area_id : null;
    this.setState({
      points: true,
      dataPoints: data,
      between: '2',
      chartType: '1',
      title: '订单分品牌数据',
    });
    dispatch({
      type: 'list/orderPic',
      payload: {
        cm_id: data.inn_id,
        start: data.start,
        end: data.end,
        area_id: reqZoneId,
      },
    });
    dispatch({
      type: 'list/orderList',
      payload: {
        cm_id: data.inn_id,
        start: data.start,
        end: data.end,
        brand: data.brand,
        type: 'brand',
        area_id: reqZoneId,
      },
    });
  };

  getList = () => {
    const {
      dispatch,
      userInfo,
      options: { key },
      area_id,
    } = this.props;
    const { listType, startDate, endDate } = this.state;
    const { branch = [], branchLevel } = userInfo;
    const reqZoneId = key === 'yz' ? area_id : null;
    let ini_branchId;
    let init_branch;
    const isZyAccount = key == 'post';
    if (branchLevel == 0 && branch.length == 0 && isZyAccount) {
      init_branch = [
        {
          id: '0',
          name: '中国邮政集团有限公司',
          level: '0',
          pid: '-2', // 自定义pid用来区分是否是单独属于总公司账号
        },
      ];
      ini_branchId = ['0'];
    } else {
      ini_branchId = branch.filter(val => (isZyAccount ? val.level != 0 : val)).map(i => i.id);
      init_branch = branch;
    }
    dispatch({
      type: 'list/setFormValues',
      payload: {
        [`${listType}Date`]: [startDate, endDate],
        [`${listType}SiteId`]: 'all',
        [`${listType}AddressId`]: ini_branchId,
        [`${listType}BrandId`]: 'all',
        listType,
        init_branch,
        area_id: reqZoneId,
      },
    });
    !isZyAccount &&
      dispatch({
        type: 'list/orderSum',
        payload: {
          area_id: reqZoneId,
        },
      });
  };

  cancel = mode => {
    this.setState({
      points: mode,
    });
  };

  render() {
    const {
      points,
      dataPoints,
      between,
      chartType,
      title,
      titlePieLeft,
      titlePieRight,
    } = this.state;
    const { stationing, stationList, operatoring, orderSum, list, area_id } = this.props;
    const { orderSummary, order_datail, orderPic, order, order_brand, brandList } = list;
    const piesLists = orderPic || [];
    const canvesLists = orderSummary || [];
    const { pagination } = order;
    const { summary } = pagination || {};
    const { sumorder_detail } = order_datail.pagination || {};
    const { sumorder_brand } = order_brand.pagination || {};
    const { num_sum, realnum_sum } = summary || {};
    const { order_sum, order_realnum_sum } = sumorder_detail || {};
    const { brand_order_sum, brand_order_realnum_sum } = sumorder_brand || {};
    const columns = [
      {
        title: '所选日期段',
        dataIndex: 'start',
        render: (current, currentData) => (
          <a onClick={() => this.onClickTime(currentData)}>
            {currentData.start}到{currentData.end}
          </a>
        ),
      },
      {
        title: '驿站名称',
        dataIndex: 'inn_name',
      },
      {
        title: '品牌',
        dataIndex: 'brand_zh',
        render: (current, currentData) => {
          if (currentData.brand == 'all') {
            return <a onClick={() => this.onClickBrand(currentData)}>{currentData.brand_zh}</a>;
          }
          return <span>{currentData.brand_zh}</span>;
        },
      },
      {
        title: `订单数 ${num_sum || 0} 条`,
        dataIndex: 'num',
      },
      {
        title: `实名订单 ${realnum_sum || 0} 条`,
        dataIndex: 'real_num',
      },
    ];
    const column = [
      {
        title: '日期',
        dataIndex: 'origin_created_time',
      },
      {
        title: '驿站名称',
        dataIndex: 'inn_name',
      },
      {
        title: '品牌',
        dataIndex: 'brand_zh',
      },
      {
        title: `订单数 ${order_sum || 0} 条`,
        dataIndex: 'num',
      },
      {
        title: `实名订单 ${order_realnum_sum || 0} 条`,
        dataIndex: 'real_num',
      },
    ];
    const columnBrand = [
      {
        title: '日期',
        dataIndex: 'origin_created_time',
      },
      {
        title: '驿站名称',
        dataIndex: 'inn_name',
      },
      {
        title: '品牌',
        dataIndex: 'brand_zh',
      },
      {
        title: `订单数 ${brand_order_sum || 0} 条`,
        dataIndex: 'num',
      },
      {
        title: `实名订单 ${brand_order_realnum_sum || 0} 条`,
        dataIndex: 'real_num',
      },
    ];
    return (
      <div>
        {points ? (
          <div>
            <DetailedData
              title={title}
              loading={orderSum}
              data={chartType == 1 ? order_brand : order_datail}
              canvesList={canvesLists}
              piesList={piesLists}
              columns={chartType == 1 ? columnBrand : column}
              dataPoints={dataPoints}
              cancel={mode => this.cancel(mode)}
              between={between}
              chartType={chartType}
              operatoring={operatoring}
              dropList={brandList}
              titlePieLeft={titlePieLeft}
              titlePieRight={titlePieRight}
              dvs="3"
              listType="orderList"
            />
          </div>
        ) : (
          <div>
            <StatisticalData
              formItemLayout={formItemLayout}
              stationing={stationing}
              stationList={stationList}
              operatoring={operatoring}
              dropList={brandList}
              loading={orderSum}
              data={order}
              canvesList={canvesLists}
              columns={columns}
              listType="orderSum"
              down="order"
              area_id={area_id}
            />
          </div>
        )}
      </div>
    );
  }
}
